<template>
  <div>
    <div class="me-header">
      <mt-header title="" class="mt-header">
        <mt-button slot="left" @click="goSetting()">
          <i slot="icon" class="iconfont icon-tubiao01"></i>
        </mt-button>
      </mt-header>
    </div>
    <div class="user-head">
      <div class="user-img" @click="goLogin()" v-show="hiddenflag">
        <img src="../../assets/images/tool/wdl.png" width="60" height="60">
      </div>
      <div class="user-img" v-show="showflag">
        <img src="../../assets/images/tool/2.jpg" width="60" height="60">
      </div>
      <div class="name" v-show="hiddenflag">
        <div>未登录</div>
      </div>
      <div class="name" v-show="showflag">
        <div>{{username}}</div>
      </div>
    </div>
    <div class="">
      <mt-cell is-link @click.native="goMyorders()">
        <span slot="title">我的订单</span>
        <img slot="icon" src="../../assets/images/tool/dds.png" width="20" height="20">
      </mt-cell>
      <div class="apps">
        <div @click="goMyordersCommit()" style="position：relative;">
          <img src="../../assets/images/tool/ytj.png" />
          <span>已提交</span>
        </div>
        <div @click="goMyordersPay()" style="position：relative;">
          <img src="../../assets/images/tool/yzf.png" />
          <span>已支付</span>
        </div>
        <div @click="goMyordersCompleted()" style="position：relative;">
          <img src="../../assets/images/tool/ywc.png" />
          <span>已完成</span>
        </div>
        <div @click="goMyordersCancel()" style="position：relative;">
          <img src="../../assets/images/tool/yqx.png" />
          <span>已取消</span>
        </div>
        <div @click="goMyordersRefund()" style="position：relative;">
          <img src="../../assets/images/tool/ytk.png" />
          <span>已退款</span>
        </div>
      </div>
      <mt-cell is-link @click.native="goBasicInformation()">
        <span slot="title">个人信息</span>
        <img slot="icon" src="../../assets/images/tool/grxx.png" width="20" height="20">
      </mt-cell>
      <mt-cell is-link @click.native="goAccountsecurity()">
        <span slot="title">账户安全</span>
        <img slot="icon" src="../../assets/images/tool/zhaq.png" width="20" height="20">
      </mt-cell>
      <mt-cell is-link @click.native="goCommoncontacts()">
        <span slot="title">常用联系人</span>
        <img slot="icon" src="../../assets/images/tool/cylxr.png" width="20" height="20">
      </mt-cell>
      <mt-cell is-link @click.native="goCommonaddress()">
        <span slot="title">常用地址</span>
        <img slot="icon" src="../../assets/images/tool/cydz.png" width="20" height="20">
      </mt-cell>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      showflag: false,
      hiddenflag: true,
      global_id: "",
      username: ""
    };
  },
  mounted() {
    let global_id = JSON.parse(localStorage.getItem("global_id"));
    this.username = JSON.parse(localStorage.getItem("global_username"));
    this.global_id = global_id;
    if (global_id != "" && global_id != null) {
      this.showflag = true;
      this.hiddenflag = false;
    }
  },
  methods: {
    goLogin() {
      this.$router.push({ path: "/login" });
    },
    goPersonalInformation() {},
    goCommoninformation() {
      this.$router.push({ path: "/commoninformation" });
    },
    goBasicInformation() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/basicInformation" });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goAccountsecurity() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/accountsecurity" });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goCommoncontacts() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/commoncontacts" });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goCommonaddress() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/commonaddress" });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goSetting() {
      this.$router.push({ path: "/setting" });
    },
    goMyorders() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/myorders", query: { rq: "qqdd" } });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goMyordersCommit() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/myorders", query: { rq: "ytj" } });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goMyordersPay() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/myorders", query: { rq: "yzf" } });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goMyordersCompleted() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/myorders", query: { rq: "ywc" } });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goMyordersCancel() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/myorders", query: { rq: "yqx" } });
      } else {
        this.$router.push({ path: "/login" });
      }
    },
    goMyordersRefund() {
      if (this.global_id != "" && this.global_id != null) {
        this.$router.push({ path: "/myorders", query: { rq: "ytd" } });
      } else {
        this.$router.push({ path: "/login" });
      }
    }
  }
};
</script>
<style scoped>
.name {
  color: #fafafa;
}
.child-view {
  height: 100%;
  overflow: hidden;
}
.user-head {
  height: 100px;
  width: 100%;
  background: url(../../assets/images/tool/DSC07632.jpg) no-repeat 100%;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 35px 50px 35px 20px;
  box-sizing: border-box;
  -webkit-box-align: center;
}
.mt-header {
  background: linear-gradient(#000000, #035838);
}
.promoters-button {
  height: 150px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.travel-agency-button {
  height: 30px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.mint-button[data-v-6f08ddab] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  /* -ms-flex-direction: column; */
  /* flex-direction: column; */
}

.mint-button-text {
  background-color: transparent;
  color: #26a2ff;
  text-align: center;
  margin: auto;
}
.mint-button--large {
  display: block;
  width: 100%;
}
.mint-button--primary {
  color: #fff;
  background-color: #26a2ff;
}
.mint-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  /* appearance: none; */
  border-radius: 4px;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: block;
  font-size: 18px;
  height: 41px;
  width: 374px;
  outline: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.mint-button--primary.is-plain {
  border: 1px solid #26a2ff;
  background-color: transparent;
  color: #26a2ff;
}

.mint-button--primary.is-plain {
  border: 1px solid #26a2ff;
  background-color: transparent;
  color: #26a2ff;
}

.content {
  margin-top: 40px;
  text-align: left;
}

.group-title {
  margin-top: 10px;
  font-size: 11px;
  color: #0c60ee;
}

.line {
  margin-top: 10px;
  height: 1px;
  background-color: #c4e3f3;
}

.apps {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.apps div {
  display: flex;
  height: 70px;
  width: 20%;
  justify-content: center;
  align-items: center;
}

.apps div {
  display: flex;
  flex-direction: column;
}

.apps div span {
  margin-top: 5px;
  font-size: 10px;
}

.apps img {
  height: 30px;
  width: 30px;
}

.slider-img {
  height: 120px;
  width: 100%;
}
.user-img {
  flex: 80px 0 0;
  width: 80px;
}

.user-img > img {
  border-radius: 50%;
}
</style>
